<template>
	<div class="content-profile" v-loading="loading">
		<div class="swiper swiperThumbs" style="overflow: hidden">
			<div class="swiper-wrapper">
				<div class="swiper-slide swiper-slide-preview" v-for="(image, index) in school_images" :key="index">
					<img :src="image" />
					<!--           class="swiper-lazy"       <div class="swiper-lazy-preloader"></div>-->
				</div>
			</div>
			<!-- 左右切换按钮 -->
			<div class="swiper-button-prev d-md-block d-hidden" @click="prev"></div>
			<div class="swiper-button-next d-md-block d-hidden" @click="next"></div>
		</div>
		<div class="swiper swiperLoop">
			<div class="swiper-wrapper">
				<div class="swiper-slide swiper-slide-neon" v-for="(image, index) in school_images" :key="index">
					<div class="neon-box">
						<img class="jj-box" src="../../assets/images/jiaojuan.png" alt="" />
						<img class="image-s" :src="image" />
						<img class="jj-box" src="../../assets/images/jiaojuan.png" alt="" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import '@/assets/css/swiper.min.css'
import Swiper from '@/assets/js/swiper.min.js'
export default {
	data() {
		return {
			school_images: [],
			temp: [
				'https://t7.baidu.com/it/u=3728410568,989468460&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=826329656,2212580321&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=1785207335,3397162108&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=1476844859,894832600&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=1416385889,2308474651&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=3696285528,2808863331&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=3404592932,3078623548&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=4265852580,160349292&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=2269795974,2286069410&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=3567189253,4174786616&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=1443739162,3109326659&fm=193&f=GIF',
			],
			loading: false,
			swiper: null,
			swiper2: null,
		}
	},
	created() {
		// this.getSchoolImage()
		this.school_images = this.temp
		this.$nextTick(() => {
			this.loaderSwiper()
		})
	},
	mounted() {},
	methods: {
		prev() {
			this.swiper2.slidePrev()
		},
		next() {
			this.swiper2.slideNext()
		},
		getSchoolImage() {
			this.loading = true
			this.$store.dispatch('appData/getArticleTypeListByCode', this.$globalDict.articleCode.schoolimage).then((article) => {
				this.$api.articletype
					.getArticleLlist({
						articleType: article.colId,
						pageSize: 20,
						pageNum: 1,
					})
					.then((res) => {
						const { rows, code } = res.data
						const imgs = []
						if (code == 200 && rows) {
							rows.forEach((e) => {
								e.bizAttachList.forEach((image) => {
									imgs.push(image.cFileUrl)
								})
							})
							this.school_images = imgs
						}
						this.school_images = this.temp
						this.$nextTick(() => {
							this.loaderSwiper()
						})
					})
					.catch((error) => {})
					.finally(() => {
						this.loading = false
					})
			})
		},
		loaderSwiper() {
			if (this.swiper != null) {
				this.swiper.destroy(true, true)
				this.swiper = null
			}
			if (this.swiper2 != null) {
				this.swiper2.destroy(true, true)
				this.swiper2 = null
			}
			this.swiper = new Swiper('.swiperLoop', {
				// lazy: {
				//   loadPrevNext: true,
				// },
				// spaceBetween: 4,
				slidesPerView: 4,
				loop: true,
				loopedSlides: 16,
				freeMode: true,
				watchSlidesProgress: true,
				//observer: true,//修改swiper自己或子元素时，自动初始化swiper    重要
				//observeParents: true,//修改swiper的父元素时，自动初始化swiper  重要
			})
			this.swiper2 = new Swiper('.swiperThumbs', {
				loop: true,
				// lazy: {
				//   loadPrevNext: true,
				// },
				spaceBetween: 0,
				thumbs: {
					swiper: this.swiper,
				},
				// 启用左右切换按钮
				navigation: {
					nextEl: '.swiper-button-next swiper-button-right',
					prevEl: '.swiper-button-prev swiper-button-left',
				},
				autoplay: {
					delay: 5000,
					disableOnInteraction: false,
				},
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.content-profile {
	position: relative;
	height: 78vh;

	//.left {
	//    flex-grow: 1;
	//}
	//
	//.right {
	//    flex: 0 0 70%;
	//}
}

.aspect-ratio-box {
	position: relative;
	height: (calc(100% - 205px)); /* 已知的高度 */
	width: 100%; /* 宽度可以根据需要设置 */
}

.aspect-ratio-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 伪元素方式 */
.aspect-ratio-box::before {
	content: '';
	display: block;
	padding-top: 50%; /* 宽高比为1:1.5，因此这里是100%/1.5 */
}

.aspect-ratio-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.swiper-slide-neon {
	border-left: 25px solid black;
	height: 100% !important;
}

.neon-box {
	display: flex;
	flex-direction: column;
	// border-left: 25px solid black;
	.image-s {
		height: 100px;
	}

	.jj-box {
		flex-shrink: 0;
		height: 45px;    
	}
}
@media screen and (max-width: 1600px) {
	.swiperThumbs {
		position: absolute;
		left: 48.5%;
		transform: translateX(-50%);
		// margin-left: 300px;
		//width: 820px;
		//height: 546px;
		width: 80%;
		height: calc(100% - 125px);
		box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.5);
		z-index: 99;
	}
}
@media screen and (min-width: 1601px) {
	.swiperThumbs {
		position: absolute;
		left: 48.5%;
		transform: translateX(-50%);
		// margin-left: 300px;
		//width: 820px;
		//height: 546px;
		width: 80%;
		height: calc(100% - 105px);
		box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.5);
		z-index: 99;
	}
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

//.swiper-slide-preview img {
//  object-fit: contain !important;
//}
@media screen and (max-width: 1600px) {
	.swiperLoop {
		position: absolute;
		bottom: 10px !important;
		width: 100%;
		left: 0;
		right: 0;
		box-sizing: border-box;
		z-index: -1;
	}
}
@media screen and (min-width: 1601px) {
	.swiperLoop {
		position: absolute;
		bottom: 10px !important;
		width: 100%;
		left: 0;
		right: 0;
		box-sizing: border-box;
		z-index: -1;
	}
}

//.swiperLoop {
//  position: absolute;
//  bottom: 10px !important;
//  width: 100%;
//  left: 0;
//  right: 0;
//  box-sizing: border-box;
//  z-index: -1;
//}

.swiperLoop .swiper-slide {
	width: 10%;
	height: 100%;
	opacity: 0.4;
}

.swiperLoop .swiper-slide-thumb-active {
	opacity: 1;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-button-next {
	position: absolute;
	right: 2%;
	width: 64px;
	height: 64px;
	background-size: 40px;
	margin-top: -56px;
	outline: none;
}

.swiper-button-prev {
	position: absolute;
	left: 2%;
	width: 64px;
	height: 64px;
	background-size: 40px;
	margin-top: -56px;
	outline: none;
}

.swiper-button-next {
	background-image: url(../../assets/images/right-a.png);
	background-color: unset !important;
	/*rgba(0, 0, 0, 0.7);*/
	background-size: 35px;
	background-repeat: no-repeat;
	background-position: center;
}

.swiper-button-prev {
	background-image: url(../../assets/images/left-a.png);
	background-color: unset !important;
	/*rgba(0, 0, 0, 0.7);*/
	background-size: 35px;
	background-repeat: no-repeat;
	background-position: center;
}

.swiper-button-left {
	//width: 20px;
	//height: 20px;
	//background-size: contain;
	//background-color: #ffffff;
	baground-image: url(../../assets/images/left-a.png);
	opacity: 0.8;
	color: #fff;
}

.swiper-button-right {
	//width: 20px;
	//height: 20px;
	//background-size: contain;
	//background-color: #ffffff;
	baground-image: url(../../assets/images/right-a.png);
	opacity: 0.8;
	color: #fff;
}
</style>
